<template>
	<view class="containerbox">
		<uv-navbar title="收藏夹" auto-back placeholder />
		
		<z-paging ref="paging" v-model="list" @query="querylist" class="containerbox">
			<template #loading>
				<dw_loading :status="loading" />
			</template>
			
			<view class="px-30 mt-20">
				<view 
					class="flex-between flex-center pb-30 border-bottom" 
					v-for="({ id, vocabulary },index) in list" 
					:key="index"
					:class="{ 'mb-30': index + 1 != list.length }"
				>
					<view class="">
						<view class="text-38 color-3a">{{index+1}}.{{vocabulary.word}}</view>
						<view class="text-28 mt-15 color6">{{vocabulary.translation}}</view>
					</view>
					
					<view class="relative flex-center">
						<view class="absolute text-28 round-base flex-center px-15 py-10" v-if="checked==index" @tap.stop="cancelFn(id)" style="white-space: nowrap">
								<view class="w-30 h-30 mr-10">
								<uv-image :src="`${imgPath}image/xx_1.svg`" width="30rpx" height="30rpx"></uv-image>
							</view>
							取消收藏	
						</view>
						
						<view class="w-32 h-32" @tap.stop="collectFn(index)">
							<uv-image :src="`${imgPath}image/ddd.svg`" width="32rpx" height="32rpx"></uv-image>
						</view>
					</view>
				</view>
			</view>
			
			<uv-overlay :opacity="0" :show="show" @click="overlayFn" zIndex="10" />
		</z-paging>
	</view>
</template>

<script setup>
	
	import { imgPath } from '@/common/config.js'
	import { ref } from 'vue'
	import { collectList,collectDetale } from '@/common/apis/other'
	
	
	const  checked=ref(-1)
	
	const paging = ref(null)
	const list = ref([])
	const loading = ref(true)
	const show = ref(false)
	
	async function querylist(page, pageSize) {//获取列表
		const params = { page, pageSize, simplePage: 1 }
		const result = await collectList(params)
		console.log(result, 'result');
		uni.$fui.sleep(() => loading.value = false)
		paging.value.complete(result)
	}
	
	const collectFn=(i)=>{
		checked.value=i
		show.value = true
	}
	const overlayFn=()=>{
		show.value = false
		checked.value= -1
	}
	async function cancelFn(id){
		console.log(id)
		const res= await collectDetale({id:id})
		checked.value= -1
		console.log(res)
		paging.value.reload()
	}
</script>

<style>page{background-color: #fff}</style>
<style scoped lang="scss">
	.color-3a{color: #3A3F5E}
	.color6{color: #626780}
	.absolute{width: 180rpx;color: #fff;background: #3A3F5E;right: 30rpx;z-index: 999}
</style>